import http from '../utils/http'
import constant from '../utils/constant'
import store from '../vuex/mobile'
import {delCookie} from '../utils/utils'
import QRCode from 'qrcodejs2'
import md5 from 'js-md5';

export default {
  name: 'order-paid',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      carDetailData: {},
      successOrder: {},
      exchangeRate: {},
      orderData: {},
      paying: false,
      paid: false,
      closePay: false,
      payUrl: '',
      orderId: null,
      isDisabled: false
    }
  },
  created: function() {
    this.$message.closeAll()
  },
  mounted: function () {
    if (!this.$route.query.id) {
      this.$router.push('/')
    }
    this.orderId = this.$route.query.id
    this.order()
    this.$root.$on('bv::modal::shown', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
      if (modalId === 'pay-modal') {
        this.closePay = false
        this.generatePayQrocde()
      }
    })
    this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
      console.log('Modal is about to be shown', bvEvent, modalId)
      if (modalId === 'pay-modal') {
        this.closePay = true
      }
    })
  },
  methods: {
    payForOrder: function() {
      let that = this
      that.isDisabled = true
      if(that.orderData.order.status === 'UNPAID') {
        
        if (that.orderData.order.type === 'PREPAY') {
          this.$refs['pay-modal'].show()
        } else {
          this.$router.push('/order-detail/' + this.orderId)
        }

        that.isDisabled = false
      } else if (that.orderData.order.status === 'CREATED') {
        let loading = that.$message.loading({
          message: '正在处理订单信息...',
          align: 'center',
          showClose: false
        })
        let payingUrl = constant.paying(that.orderData.order.id)
        http.post(payingUrl, null, data => {
          that.isDisabled = false
          loading.close()
          //this.generatePayQrocde()
          if (that.orderData.order.type === 'PREPAY') {
            that.$refs['pay-modal'].show()
          } else {
            that.$router.push('/order-detail/' + that.orderId)
          }
        }, data => {
          that.isDisabled = false
          loading.close()
          that.$message.warning({message: data.message, align: 'center'})
          that.paid = false
        })
      }
    },
    offlinePay: function() {
      let that = this
      debugger
      that.isDisabled = true
      http.post(constant.arrivePay(this.orderId), null, (data) => {
        let message = this.$message.success({
          message: '线下支付成功，请联系负责销售进行线下支付！',
          align: 'center',
          showClose: false
        })
        setTimeout(function() {
          message.close()
          that.isDisabled = false
          that.$router.push('/profile')
        }, 1000)
      }, fail => {
        that.isDisabled = false
        this.$message.error({
          message: fail.message,
          align: 'center',
          showClose: false
        })
      })
    },
    order: function () {
      if (!this.$route.query.id) {
        this.$router.push('/')
      }
      this.orderId = this.$route.query.id
      let message = this.$message.loading({
        message: '正在加载数据...',
        align: 'center'
      })
      http.get(constant.orderDetail + this.orderId, null, resp => {
        this.orderData = resp
        let signString = this.orderData.order.brand + this.orderData.order.brand + this.orderData.order.currency_code + this.orderData.order.agent + this.orderData.order.country
        let sign = md5(signString)
        this.payUrl = constant.payHost + '?type=prepay&orderId=' + this.orderData.order.id + '&mobile=' + this.$store.getters.getMobile + '&sign=' + sign
        console.log(this.orderData)
        message.close()
      }, function (resp) {
        message.close()
      })
      
    },

    // generate pay qrcode here
  	generatePayQrocde() {
      console.log(this.payUrl)
  		let url = this.payUrl  // TODO
  		let qrcode = new QRCode('qrcode', {
        width: 132,  
        height: 132,
        text: url, // 二维码地址
        colorDark : "#000",
        colorLight : "#fff",
      })
      this.getPaidResult()
  	},
  	getPaidResult() {
      let that = this
  		http.get(constant.orderDetail + that.orderId, null, resp => {
        if(resp.order.pay_status === 'PAID') {
          that.$refs['pay-modal'].hide()
          let success = this.$message.loading({
            message: '支付成功，正在跳转页面',
            align: 'center'
          })
          setTimeout(function() {
            success.close()
            that.$router.push('/order-detail/' + that.orderId)
          }, 1000)
        } else {
          if(!that.closePay) {
            setTimeout(function() {
              that.getPaidResult()
            }, 2000)
          }
        }
      }, function (resp) {
        console.log(resp)
      })
  	}
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'order-paid') {
        this.order()
      }
    }
  }
}
